<template>
  <div id="head-menu" :class="hasKeys?'head-menu-hasKeys':''">
    <div class="yh-layout-box">
      <div class="menu-logo cursor" @click="routeToPath('/')">
        <img class="yh-middle" src="@/assets/images/meal/logo.png">
      </div>

      <!--      <ul class="menu-list">-->
      <!--        <li v-for="(i, index) in menuList" :class="i.ide == ideName?'active':''" @click="routeToPath(i.url, i.ide == 'merchants'?'new':'')">{{ i.name }}</li>-->
      <!--      </ul>-->
      <div class="yh-line fl">
        <img src="@/assets/images/help/help_10.png"/>
      </div>
      <div class="wholesale-market fl">
        <div class="wholesale-marketName">{{market.marketName}}</div>
        <div class="wholesale-web">
          <img @click="routeToPath('/market/list','mall', 'new')" src="@/assets/images/market/market-switch.png" />
        </div>
      </div>

      <div :class="hasKeys?'hasKeys menu-search':'menu-search'">
        <div class="search-main">
          <div class="search-select">
            <el-dropdown  trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                <span class="searchActive">{{searchActive}}</span>  <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(i, idx) in searchList" :command="i.value" :key="idx">{{ i.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="search-input">
            <el-input v-if="searchActive == '商品'" :placeholder="searchList[0].tips" v-model="searchKW" @keyup.enter.native="submitSearch"></el-input>
            <el-input v-else :placeholder="searchList[1].tips" v-model="searchKW" @keyup.enter.native="submitSearch"></el-input>
          </div>
          <div class="search-btn" @click="submitSearch">
            <img class="yh-middle" src="@/assets/images/layouts/headMenu/search.png">
          </div>
        </div>
        <div class="search-key" v-if="hasKeys">
          <a @click="routeToPath('/search/product?kw='+i, 'mall', 'new')" v-for="(i, index) in searchKeys" :key="index">{{i}}</a>
        </div>
        <div class="Qr-code">
          <img src="@/assets/images/market/qr-code.png"/>
        </div>
      </div>
      <div class="search-classify">
        <div class="search-classify-fl"  @mouseover="showClassify = true;" @mouseout="showClassify = false;">
          <img src="@/assets/images/market/search-classify.png" />
        </div>
      </div>
    </div>
    <div class="market-classify" v-show="showClassify">
      <!--      <div class="hung-tab-wrap cursor" >-->
      <!--         <img src="../../../assets/images/market/search-classify.png"/>-->
      <!--      </div>-->
      <div class="classify-left"  @mouseover="showClassify = true;" @mouseout="showClassify = false;">
        <div class="pop-classify">
          <div class="pop-classify-wrap">
            <div v-for="(item, idx) in classifys">
              <div  v-for="(child,index) in item.childs" style="clear: both;">
                <div class="pop-classify-wrap-fl">
                  <span @click="clickClassifyList(front.tradeName)">{{item.categoryName}} >  </span>
                </div>
                <div class="pop-tags">
                  <span v-for="(front,index) in child.frontAppDTO" @click="clickClassifyList(front.tradeName)"> | {{ front.tradeName }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {getMarketDetail,getMarketPcTrade} from '@/api/market'
  export default {
    props: ['ideName', 'kw', 'pageFrom', 'hasKeys','marketId'],
    data() {
      return {
        searchList: [{
          label: '商品',
          value: 'goods',
          tips: '请输入商品或品牌名称'
        },{
          label: '云工厂',
          value: 'factory',
          tips: '请输入云工厂名称或品牌名称'
        }],
        searchActive: null,
        searchKW: null,
        kwFrom: this.getUrlParams('factoryName'),
        menuList: [{
          name: '首页',
          url: '/',
          ide: 'home'
        },{
          name: '招商入驻',
          url: '/merchants/package',
          ide: 'merchants'
        },
          {
            name: '品牌中心',
            url: '/brand',
            ide: 'brand'
          },
          {
            name: '帮助中心',
            url: '/help',
            ide: ''
          },{
            name: '关于我们',
            url: '/about',
            ide: 'about'
          }],

        classifys: [],
        showClassify: false,
        market:{
          address: '',
          area: '',
          city: '',
          introduction: '',
          latitude: '',
          locationAddress: '',
          longitude: '',
          mapImg: '',
          marketId: '',
          marketImages: '',
          marketName:'',
          marketStatus: 0,
          marketsTags:'',
          officeTime: '',
          parkCost: '',
          province: '',
          shortName: '',
          telphone: '',
        },
        searchKeys:['钳类工具', '不锈钢', '五金配件', '角磨机', '安全鞋', '阀片', '水龙头'],
      }
    },
    created() {
      if(this.kwFrom){
        this.searchActive = this.searchList[1].label;
        this.searchKW=this.kwFrom;
      }else{
        this.searchActive = this.searchList[0].label;
        this.searchKW=this.kw;
      }
      this.getMarketDetail();
    },
    methods: {
      clickShowClassify(){
        this.showClassify = true;
        this.showClassify = setTimeout(() => {
          return false;
        }, 100);
      },
      clickClassifyList(value) {
        this.routeToPath('/search/product?kw='+value, 'new')
      },
      // 市场详情
      getMarketDetail(){
        getMarketDetail({marketId:this.marketId}).then(res=>{
          this.market = res.data;
          //获取市场二级类目
          if(this.market.marketsCategories!=null){
            this.market.marketsCategories.forEach(item=>{
              item.childs.forEach(child=>{
                child.frontAppDTO = [];
                getMarketPcTrade({id:child.categoryId}).then(res=>{
                  child.frontAppDTO = res.data;
                  const index = this.classifys.findIndex(res=>{return res.categoryId == item.categoryId});
                  if(index<0){
                    this.classifys.push(item);
                  }
                });
              });
            });
          }
        });
      },
      handleCommand(e) {
        for (var index in this.searchList) {
          if (this.searchList[index].value == e) {
            this.searchActive = this.searchList[index].label
          }
        }
      },
      submitSearch(){
        if(!this.searchKW && this.searchActive == '商品' && this.pageFrom != 'product') {
          return false;
        }
        if (this.searchActive == '商品') {
          this.routeToPath('/search/product?kw=' + this.searchKW,'new')
        } else {
          this.routeToPath('/search/shop?factoryName=' + this.searchKW,'new')
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  #head-menu{
    overflow: hidden;
    background-color: #FFF;
    padding-top: 16px;
    min-width: 1200px;
    border-bottom: 2px solid #005ddc;
    .menu-logo{
      float: left;
    }
    .menu-list{
      float: left;
      margin-left: 92px;
      li{
        float: left;
        margin-right: 35px;
        font-size: 16px;
        line-height: 50px;
        cursor: pointer;
      }
      .active{
        color: #255B8A;
        font-weight: 600;
      }
    }
    .menu-search{
      float: right;
      margin-top: 8px;
      .search-key{
        padding-top: 10px;
        a{
          float: left;
          margin:0 10px;
          font-size: 12px;
          color: #666;
          &:hover{
            color: #255B8A;
          }
        }
      }
      .search-main{
        overflow: hidden;
        margin-right: 80px;
      }
      .search-main div {
        float: left;
      }
      .search-select{
        background-color: #F0F0F0;
        height: 36px;
        line-height: 36px;
        border-radius: 15px 0 0 0;
        padding-left: 20px;
        padding-right: 10px;
        .searchActive{
          display: inline-block;
          width: 40px;
        }
        cursor: pointer;
        .el-dropdown-link{
          font-size: 12px;
        }
      }
    }
    .hasKeys{
      margin-top: 0;
    }
    .yh-line{
      margin: 0 15px;
    }
    .wholesale-market{
      .wholesale-marketName{
        color: #333;
        font-size: 18px;
        font-weight: bold;
        margin-top: 5px;
      }
      .wholesale-web{
        font-size: 14px;
        color: #888;
        margin-top: 5px;
      }
    }
    .Qr-code{
      margin-top: -45px;
      float: inherit;
    }
  }
  #head-menu.head-menu-hasKeys{
    padding-bottom: 17px;
    .menu-logo{
      margin-top: 5px;
    }
    .menu-list li{
      line-height: 56px;
    }
  }

  .market-classify{
    position: absolute;
    top: 152px;
    left: 50%;
    margin-left: -600px;

    .classify-left{
      position: relative;
      ul{
        height: 476px;
        overflow: hidden;
      }
      .pop-classify{
        position: absolute;
        top: 0px;
        width: 600px;
        max-height: 450px;
        padding: 20px 15px;
        background-color: #005DDC;
        z-index: 11;

        .pop-classify-wrap{
          position: relative;
          height: 100%;
          .indexClassifyImg{
            position: absolute;
            width: 460px;
            height: 100px;
            bottom: 10px;
            left: 10px;
            text-align: center;
            .indexClassifyImg-item{
              display: inline-block;
            }
            .indexClassifyImg-item:nth-child(2){
              margin-left: 40px;
            }
          }
        }
        .pop-title{
          font-size: 16px;
          color: #333;
          padding-bottom: 20px;
          cursor: pointer;
          border-bottom:  1px dashed #eee;
          &:hover{
            color: #255B8B
          }
        }
        .pop-classify-wrap-fl{
          width: 120px;
          float: left;
          text-align: right;
          color: #fff;
          font-size: 16px;
          font-family: PingFang-SC-Bold;
          line-height: 26px;
        }

        .pop-tags{
          margin-top: 2px;
          width: 460px;
          float: left;
          margin-bottom: 20px;
          padding-left: 10px;
          span{
            cursor: pointer;
            color: #FFFFFF;
            font-size: 12px;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            line-height: 20px;
            &:hover{
              color: #1bfff6;
            }
          }
          // span:nth-child(1){
          //   margin-left: 0;
          // }
        }
      }
    }

    .classify-item{
      padding-bottom: 13px;
      margin-bottom: -1px;
      &:hover{
        background-color: #fff;
        position: relative;
        z-index: 2;
        .category-title{
          border-color: #fff;
          color: #000;
        }
        .category-subtitle{
          span{
            color: #555;
          }
        }
      }
      span{
        cursor: pointer;
      }
      .category-title{
        padding-top: 13px;
        margin: 0 30px;
        margin-bottom: 6px;
        border-top: 1px solid #DDDDDD;
        span{
          color: #333333;
          margin-right: 10px;
          font-size: 14px;
          &:hover{
            color: #255B8B
          }
        }
      }
      .category-subtitle{
        margin: 0 30px;
        width: 180px;
        overflow: hidden;
        height: 20px;
        line-height: 20px;
        text-overflow: clip;
        span{
          color: #888888;
          margin-right: 10px;
          font-size: 12px;
          display: inline-block;
          &:hover{
            color: #255B8B
          }
        }
      }
    }
    .classify-item.classify-item-active{
      background-color: #fff;
      position: relative;
      z-index: 2;
      .category-title{
        border-color: #fff;
        color: #000;
      }
      .category-subtitle{
        span{
          color: #555;
        }
      }
    }
    .classify-item:nth-child(1){
      border-radius: 10px 0 0 0;
    }
    .classify-item:nth-child(1) .category-title{
      border-top: none;
    }
    .classify-item:nth-child(7){
      border-radius: 0 0 0 10px;
      .category-title{
        padding-top: 11px;
      }
    }
    .classify-item:nth-child(8) .category-title{
      border-top: none;
    }
    .hung-tab-wrap{
      position: absolute;
      top: -20px;
      left: -45px;
      z-index: 10;
      .hung-line{
        width: 1px;
        height: 20px;
        background: #255B8B;
        margin-left: 10px;
      }
      .hung-enter-text{
        width: 22px;
        height: 100px;
        background: #255B8B;
        color: #fff;
        font-size: 14px;
        padding-top: 15px;
        text-align: center;
        border-radius: 11px;
      }
    }
  }
</style>

<style lang="scss">
  .search-input{
    .el-input__inner{
      background-color: #F0F0F0;
      width: 280px;
      padding: 0 10px;
      height: 36px;
      border: 0;
      font-size: 12px;
      border-radius: 0;
    }

  }
  .search-select{
    .el-dropdown{
      min-width: 60px;
    }
  }

  .search-main{

    .el-dropdown-menu__item{
      padding: 0 18px;
    }
  }
  .el-dropdown-menu{
    padding: 0;
    overflow: inherit;
  }
  .search-classify{
    clear: both;
    .search-classify-fl{
      float: left;
      margin-bottom: -3px;
    }
    .search-classify-rg{
      float: right;
      padding: 10px;
    }
    span{
      width: 71px;
      height: 17px;
      font-size: 16px;
      font-family: PingFang-SC-Bold;
      color: #222222;
      line-height: 17px;
      cursor: pointer;
    }
  }
</style>
